<template>
  <div>
    <div id="map-con6" ref="mapCon6"></div>
  </div>
</template>

<script>
import ol from "ol";
import Map from "ol/Map";
import { OSM, ImageStatic } from "ol/source";
import {
  Tile as TileLayer,
  Heatmap as HeatmapLayer,
  Image as ImageLayer,
} from "ol/layer";
import View from "ol/View";
import { fromLonLat } from "ol/proj";
import { Projection } from "ol/proj";
import { getCenter } from "ol/extent";

export default {
  name: "imagelayer",
  data() {
    return {
      map: null,
    };
  },
  created() {},
  async mounted() {
    let that = this;
    const extent = [0, 0, 1024, 968];
    const projection = new Projection({
      code: "xkcd-image",
      units: "pixels",
      extent: extent,
    });
    
    const map = new Map({
      layers: [
        // new TileLayer({
        //   source: new OSM({
        //     wrapX: false, // Whether to wrap the world horizontally
        //   }),
        // }),
      ],
      target: this.$refs.mapCon6,
      view: new View({
        projection: projection,
        center: getCenter(extent),
        zoom: 2,
        maxZoom: 8,
      }),
    });

    this.map = map;

    let imageLayer = new ImageLayer({
      background: "#1a2b39",
      imageRatio: 2,

      source: new ImageStatic({
        url: "http://localhost:8000/99.png",
        projection: projection,
        imageExtent: extent,
      }),
      zIndex: 100,
    });

    map.addLayer(imageLayer);
  },
  methods: {},
};
</script>

<style scope>
#map-con6 {
  height: 90vh;
}
</style>